<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="main" my_attribute="hello" style="color: red;" onclick="console.log('get')">main</div>

    <script>

        const div_main = document.getElementById('main')

        // getAttribute()
        // 可以获取属性
        // 属性名不区分大小写
        // 自定义属性前缀data-
        console.log(div_main.getAttribute('id'), div_main.getAttribute('my_attribute')) // main  hello

        // 获取属性返回值不同
        // style属性和事件处理程序
        console.log(div_main.style) // CSSStyleDeclaration 对象
        console.log(div_main.getAttribute('style')) // color: red(字符串类型)

        console.log(div_main.getAttribute("onclick")) // 'console.log('get')'
        console.log(div_main.onclick) // 返回JavaScript函数
    </script>
</body>
</html>